<template>
  <el-card class="form-container" shadow="never">
    <el-form :rules="rules" ref="contentFrom" label-width="150px">
      <el-form-item label="默认星级：" prop="rate">
        <el-rate
          class="rate"
          v-model="rate"
          disabled
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
      </el-form-item>
      <el-form-item label="标签设置：" prop="commonCode">
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          placeholder="按回车提交"
          style="width: 100px"
          @keyup.enter.native="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {
  commonList,
  commonSave,
  commonUpdate,
  commonDelById
} from '@/api/content'

const defaultContent = {
}
export default {
  name: 'AddContent',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      rate: 5,
      query: {},
      rules: {
        commonCode: []
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  mounted () {
    if (this.isEdit) {
      this.getList()
    } else {
      this.query = Object.assign({}, defaultContent)
    }
  },
  methods: {
    getList () {
      commonList({ commonType: this.$route.query.commonType }).then((res) => {
        this.query = res.data
        this.dynamicTags = res.data.map((item) => {
          return item.commonDesc
        })
      })
    },
    handleClose (tag) {
      const index = this.dynamicTags.indexOf(tag)
      this.dynamicTags.splice(index, 1)
      commonDelById({ id: this.query[index].id }).then((res) => {
        if (res.code === 200) {
          this.getList()
        }
        this.$message({
          message: res.message,
          type: res.code === 200 ? 'success' : 'error',
          duration: 1000
        })
      })
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm () {
      if (this.inputValue) {
        const commonType = this.$route.query.commonType
        const commonName = {
          training: '课程评价',
          lecturer: '讲师评价'
        }
        commonSave({ commonType, commonDesc: this.inputValue, commonName: commonName[commonType] }).then((res) => {
          if (res.code === 200) {
            this.getList()
            this.dynamicTags.push(this.inputValue)
            this.inputVisible = false
            this.inputValue = ''
          }
          this.$message({
            message: res.message,
            type: res.code === 200 ? 'success' : 'error',
            duration: 1000
          })
        })
      }
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.rate {
  height: 40px;
  display: flex;
  align-items: center;
}
</style>
